<template>
	<div id="releasemarks">
		<div class="title">
			发标资料
		</div>
		<div class="release_form">
			<el-form label-width="100px" style="">
				<el-form-item label="发表模式：">
					<div class="releasetypes my-flex-left">
						<div class="mark_types my-flex-left" v-for="(val,key) in $store.state.way">
							<input name="mark" type="radio" :value="key" v-model="params.way" />
							<span>{{val}}</span>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="产品：" class="type_name">
					<el-cascader expand-trigger="hover" @change="changeType" :props="defaultProps" :options="tableData" v-model="categoryId"></el-cascader>
				</el-form-item>
				<el-form-item label="求购标题：">
					<el-input v-model="params.title" type="text" maxlength="30" placeholder="请填写求购标题"></el-input>
				</el-form-item>
				<el-form-item label="求购数量：">
					<el-input class="num_input" @input="changeQty" v-model="params.qty" placeholder="请填写求购数量"></el-input>
					<span class="unit my-flex-center">吨</span>
				</el-form-item>
				<el-form-item label="联系人：">
					<el-input v-model="params.contactName" type="text" maxlength="20" placeholder="请填写联系人姓名"></el-input>
				</el-form-item>
				<el-form-item label="联系电话：">
					<el-input v-model="params.contactTel" :maxlength="11" :minlength="11" placeholder="请填写联系电话"></el-input>
				</el-form-item>
				<el-form-item label="邮箱：">
					<el-input v-model="params.contactEmail" type="text" :maxlength="50" placeholder="请填写邮箱地址"></el-input>
				</el-form-item>
				<el-form-item label="截止时间：">
					<el-date-picker class="dateicon" :picker-options="pickerOptions0" v-model="params.expirationDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择截止时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="地址：">
					<div class="angel_select" @click="selectAddress()">
						<el-input v-model="params.addressPre" placeholder="请选择收货地址"></el-input>
						<img src="../../assets/centers/icon_arrow_spread_mine.png" />
					</div>
				</el-form-item>
				<el-form-item label="详细地址：">
					<el-input type="textarea" v-model="params.addressDetail" placeholder="填写输入详细地址"></el-input>
				</el-form-item>
				<el-form-item label="图片资料：(选填)">
					<v-multipleUpload :obj="info" key_='imgs'></v-multipleUpload>
				</el-form-item>
				<el-form-item label="">
					<div class="infobtn my-flex-center" @click="public()">
						发布
					</div>
				</el-form-item>
			</el-form>
		</div>

		<!--<mapset :model="mapmodel" v-on:selectBack="selectBack"></mapset>-->
	</div>
</template>

<script>
	import mapset from '@/components/map/map.vue';
	import category from '../common/category';
	import service from '@/js/services/markservice.js';
	import treeService from '@/js/common/customerservice.js';
	import bus from '@/js/common/bus.js';
	export default {
		components: {
			mapset,
			category
		},
		inject: ['selectAddressShow'],
		data() {
			return {
				currrentId: 4,
				categoryId: [], //六级分类
				params: {
					title: "", //标题 
					way: "manys", //招标方式,0:海量;1:系统 
					matterType: "", //招标类别
					productCategoryIdsCN: '',
					contactName: "", //联系人 
					contactTel: "", //联系电话 
					contactEmail: "", //联系人邮箱 
					expirationDate: "", //截至日期 
					qty: "", //招标数量,double类型 
					imgs: "", //图片资料 "
					remark: "", //描述 
					unitId: "", //单位,存字典,如:吨,升等 
					unitIdCN: '',
					latitude: "", //纬度 
					longitude: "", //经度
					addressDetail: "", //收货地址(详细地址)
					addressPre: ''
				},
				defaultProps: {
					children: 'children',
					label: 'name',
					value: 'id'
				},
				info: {
					imgs: []
				},
				mapmodel: {
					visible: false,
					address: null,
					longitude: 0,
					latitude: 0,
					addressPre: '', //省市
					addressDetail: ''
				},
				tableData: [],
				pickerOptions0: {
	          		disabledDate(time) {
		            	return time.getTime() < Date.now() - 8.64e7;
		          	}
		        },
			}
		},
		async mounted() {
			let arr = ['way'];
			await this.tool.getDirByKey(this, arr);
			this.getCustomerTree();
			if(this.$route.query.id) {
				this.params.way = this.$route.query.id;
			}
			bus.$on('test', res => {
					this.selectAddressBack(res);
				})
		},
		methods: {
			...service,
			...treeService,
			 
			selectCategory() {
				this.$refs.category.show();
			},
			public() {
				this.release();
			},
			changeQty() {
				if(this.params.qty * 1 > 999999) {
					this.params.qty = 999999;
				}
			},
			changeType(data) {
				let unit;
				this.params.matterType = this.categoryId[this.categoryId.length - 1];
				console.log(this.params.matterType);
				if(data.length == 1) {
					unit = this.tableData.filter(x => x.id == data[0])[0];
				} else if(data.length > 1) {
					unit = this.tableData.filter(x => x.id == data[0])[0].children.filter(x => x.id == data[1])[0];
				}
				if(unit) {
					this.params.unitId = unit.unitId;
					this.params.unitIdCN = unit.unitIdCN;
				}
				this.$nextTick(() => {
					let strings = $('.type_name .el-cascader .el-cascader__label').text().replace(/\s*/g, "");
					let string1 = strings.split('/').join('-');
					this.params.productCategoryIdsCN = string1;
					console.log(this.params.productCategoryIdsCN);
				})

			},
			getName(ev) {
				let arr = [];
				var dom = $(ev.target);
				this.arrName = [];
				this.setName(dom);
				console.log(this.arrName);
				this.params.productCategoryIdsCN = this.arrName.reverse().join('-');
			},
			setName(dom) {
				if(this.tool.getTargetDom(dom, 'item-li')) {
					dom = this.tool.getTargetDom(dom, 'item-li');
					this.arrName.push(dom.children('.first_level').children('.name').text());
					if(this.tool.getTargetDom(dom.parent(), 'item-li')) {
						this.setName(dom.parent());
					}
				} else {
					return;
				}

			},

//			selectAddress() {
//				this.mapmodel.visible = true;
//				this.mapmodel.longitude = this.params.longitude;
//				this.mapmodel.latitude = this.params.latitude;
//				this.mapmodel.address = this.params.addressPre;
//			},
//			selectBack(model) {
//				this.params.addressPre = model.address;
//				this.params.latitude = model.longitude;
//				this.params.longitude = model.latitude;
//			},
			selectAddress() {
				if(this.params.longitude) {
					let mapmodel = {
						longitude: this.params.longitude,
						latitude: this.params.latitude,
						address: this.params.addressPre
					}
					this.selectAddressShow(mapmodel);
				} else {
					this.selectAddressShow();
				}
			},
			selectAddressBack(model){
//				debugger
				this.params.addressPre = model.address;
				this.params.latitude = model.latitude;
				this.params.longitude = model.longitude;
			}
		}
	}
</script>

<style lang="less" src="../../less/page/mark/mark.less"></style>